<template>
	<!-- 抽屉式  -->
	<el-drawer title="新增文章" size="70%" :visible.sync="dialog" :before-close="handleClose" direction="rtl" custom-class="demo-drawer"
	 ref="drawer">
		<div class="demo-drawer__content">
			<el-form ref="form" :model="form" label-width="80px" :rules="rules">

				<el-form-item label="文章标题" prop="title">
					<el-input v-model="form.title" clearable style="width: 60%;"></el-input>
				</el-form-item>

				<el-form-item label="文章作者" prop="author">
					<el-input v-model="form.author" clearable style="width: 60%;"></el-input>
				</el-form-item>

				<el-form-item label="文章内容" prop="content">
					<mavon-editor v-model = 'form.content'></mavon-editor>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="saveArticle()">保 存</el-button>
					<el-button @click="reset()">重 置</el-button>
				</el-form-item>
			</el-form>
		</div>

	</el-drawer>
</template>

<script>
	export default {
		data() {

			return {
				form: {
					title: '',
					author: '佚名',
					content: ''
				},
				//标识职务是否存在所用
				flag: false,
				//表单验证规则
				rules: {
					title: [
						{required: true,message: '请输入文章标题',trigger: 'blur'},
						{min: 1,max: 40,message: '长度在 1 到 40 个字符',trigger: 'blur'}
					],
					author: [
						{required: true,message: '请输入作者,文章无出处即为佚名',trigger: 'blur'},
						{min: 1,max: 20,message: '长度在 1 到 20 个字符',trigger: 'blur'}
					],
					content: [
						{required: true,message: '内容不能为空',trigger: 'blur'}
					],
				},
				dialog: false,
				loading: false
			}
		},
		methods: {
			saveArticle() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						const that = this
						this.$http.post("/articleMeg/saveArticle", this.form).then(function(res) {
							console.log(res)
							if (res.data.code == 200) {
								that.$message({
									showClose: true,
									message: "保存成功",
									type: 'success'
								});
								//整个页面进行刷新
								window.location.reload();
							} else {
								that.$message({
									showClose: true,
									message: "保存失败",
									type: 'error'
								});
							}
						})
					} else {
						return false;
					}
				})
			},
			reset() {
				//关闭抽屉时重置表单元素
				// this.form = this.$options.data().form;
				this.$refs.form.resetFields();
			},
			handleClose(done) {
				if (this.loading) {
					return;
				}
				this.$confirm('确定关闭将不会保存数据？')
					.then(_ => {
						this.loading = true;
						this.timer = setTimeout(() => {
							done();
							this.loading = false;
						}, 100);
						this.reset();
					})
					.catch(_ => {});
			}
		},
		created() {
			
		}

	}
</script>

<style>

</style>
